<template>
  <div class="table-data-view warpper">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
      <div class="btns">
        <el-button type="primary" icon="el-icon-plus" @click="addOutinfo" size="mini">新增</el-button>
        <el-button type="primary" icon="el-icon-upload2" size="mini" @click="productDeliveryExport">导出</el-button>
      </div>
    </div>
    <div>
      <el-tabs v-model="getProduct.handle" type="card" @tab-click="handleClick" style="margin-top: 15px">
        <el-tab-pane label="已处理" name="0"></el-tab-pane>
        <el-tab-pane label="未处理" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <el-row style="margin-top: 14px" :gutter="20">
      <el-col :span="4">
        <el-select v-model="getProduct.sortList[0]" @change="conditionChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="getProduct.searchData" class="input-with-select" @clear="conditionChange" clearable>
          <el-button slot="append" icon="el-icon-search" @click="conditionChange"></el-button>
        </el-input>
      </el-col>
      <el-col :span="2" :push="8">
        <!-- <el-button icon="el-icon-refresh">重置</el-button> -->
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <table-list v-loading="isTbLoading" ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @viewDetails="showViewDetails"></table-list>
    <!-- 分页区域 -->
    <div>
      <table-pagination :total="total" :currentPage="getProduct.pageNow" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @reset="handlRreset"></table-pagination>
    </div>
    <!-- 新增出库信息对话框 -->
    <addProductInfo ref="addProductInfo"></addProductInfo>
    <!-- 查看详情对话框 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import { getProductDelivery, exportExcelByCondition } from '@/api/productApi.js'

export default {
  data() {
    return {
      isTbLoading: true,
      tableConfig: {},
      tableData: [],

      productListTableData: [],
      productListtableConfig: {},
      isDisabled: false,

      activeName: '',
      total: 0, // 产品出库数据总条数
      productTypeListTotal: 0,
      getProduct: {
        // 获取产品入库数据请求参数对象
        handle: 0,
        pageNow: 1,
        pageSize: 10,
        searchData: '',
        sortList: [0],
        type: 2,
      },
      options: [
        {
          value: 0,
          label: '请选择排序规则',
        },
        {
          value: 1,
          label: '按星级升序',
        },
        {
          value: 2,
          label: '按星级降序',
        },
        {
          value: 3,
          label: '按入库时间升序',
        },
        {
          value: 4,
          label: '按入库时间降序',
        },
        {
          value: 9,
          label: '按公司名称升序',
        },
        {
          value: 10,
          label: '按公司名称降序',
        },
      ],
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    tablePagination: () => import('@/components/table_pagination.vue'),
    addProductInfo: () => import('./product_delivery_info.vue'),
  },
  created() {
    this.tableConfig = {
      isShowIndex: true,
      props: [
        {
          type: 'text',
          label: '所属公司',
          prop: 'applicantDeptName',
        },
        {
          type: 'text',
          label: '产品名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '产品类型',
          prop: 'productCategory',
        },
        {
          type: 'state',
          label: '状态',
          prop: 'strState',
        },
      ],
      isOpt: true,
      optBtns: [
        {
          label: '查看详情',
          callback: 'viewDetails',
          code: 'mgr_edit',
        },
      ],
    }
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      let obj = {
        ...this.getProduct,
      }
      obj.handle = Number(this.getProduct.handle)
      getProductDelivery(obj).then((res) => {
        let list = res.data.data.records
        this.total = res.data.data.total
        // 数据结构不符，重构一个数组给表格遍历
        list.map((v, i) => {
          list[i].name = v.productsResult.name
          list[i].productCategory = v.productsResult.productCategory
          //状态列的状态码转换状态文字 9(审核已结束，不通过) 2(单位审核) 7(已完成)
          if (v.state == 2) {
            this.$set(v, 'strState', '单位审核')
            this.$set(v, 'color', 'blue')
            return v
          } else if (v.state == 7) {
            this.$set(v, 'strState', '已完成')
            this.$set(v, 'color', 'green')
            return v
          } else if (v.state == 9) {
            this.$set(v, 'strState', '审核已结束，不通过')
            this.$set(v, 'color', 'red')
            return v
          }
        })
        this.tableData = list
        this.isTbLoading = false
      })
    },
    // 处理和未处理的切换
    handleClick(v) {
      this.getProductInfo()
    },
    handleSizeChange(newsize) {
      this.isTbLoading = true
      this.getProduct.pageNow = 1
      this.getProduct.pageSize = newsize
      this.getProductInfo()
    },
    handleCurrentChange(newpage) {
      this.isTbLoading = true
      this.getProduct.pageNow = newpage
      this.getProductInfo()
    },

    // 筛选条件改变
    conditionChange() {
      this.getProductInfo()
    },
    handlRreset() {
      this.getProduct.pageNow = 1
      this.getProductInfo()
    },
    // 新增按钮
    addOutinfo() {
      this.$refs.addProductInfo.addInfo()
    },
    //   导出
    productDeliveryExport() {
      let columns = [
        { title: '所属公司', key: 'applicantDeptName' },
        { title: '产品名称', key: 'name' },
        { title: '产品类型', key: 'productCategory' },
        { title: '状态', key: 'state' },
      ]
      let data = this.tableData
      if (!data || data.length == 0) return this.$message.warning('暂无数据！！！')
      this.$exportToExcel(columns, data, '产品出库') //表头 导出数据 文件名
    },
    showViewDetails(row) {
      this.$refs.viewDetails.openDialog(row)
    },
  },
}
</script>

<style lang="scss" scoped>
.btns {
  width: 180px;
  display: flex;
  justify-content: space-around;
  align-content: center;
}
</style>
